<template>
  <Page title="BPMN 设计器测试" description="测试 BPMN 流程设计器功能">
    <div class="test-designer-page">
      <div class="designer-wrapper">
        <BpmnDesigner
          v-model:bpmn-xml="bpmnXml"
          :show-properties="true"
          @save="handleSave"
        />
      </div>

      <!-- XML 预览 -->
      <div class="xml-preview">
        <Card title="BPMN XML 预览" size="small">
          <div class="xml-actions">
            <Space>
              <Button size="small" @click="copyXml">
                <template #icon><CopyOutlined /></template>
                复制 XML
              </Button>
              <Button size="small" @click="clearXml">
                <template #icon><DeleteOutlined /></template>
                清空
              </Button>
              <Button size="small" type="primary" @click="loadSampleXml">
                <template #icon><FileTextOutlined /></template>
                加载示例
              </Button>
            </Space>
          </div>
          <div class="xml-content">
            <pre>{{ bpmnXml || '暂无内容' }}</pre>
          </div>
        </Card>
      </div>
    </div>
  </Page>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import { Button, Card, Space, message } from 'ant-design-vue';
import {
  CopyOutlined,
  DeleteOutlined,
  FileTextOutlined,
} from '@ant-design/icons-vue';

import BpmnDesigner from './components/bpmn-designer/index.vue';

const bpmnXml = ref('');

// 保存
function handleSave(xml: string) {
  console.log('保存的 BPMN XML:', xml);
  message.success('保存成功！请查看控制台输出');
}

// 复制 XML
function copyXml() {
  if (!bpmnXml.value) {
    message.warning('暂无内容可复制');
    return;
  }

  navigator.clipboard.writeText(bpmnXml.value).then(() => {
    message.success('已复制到剪贴板');
  });
}

// 清空
function clearXml() {
  bpmnXml.value = '';
  message.info('已清空');
}

// 加载示例 XML
function loadSampleXml() {
  bpmnXml.value = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
                  xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
                  xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
                  xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
                  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                  id="Definitions_1"
                  targetNamespace="http://bpmn.io/schema/bpmn">
  <bpmn:process id="Process_LeaveRequest" name="请假流程" isExecutable="true">
    <bpmn:startEvent id="StartEvent_1" name="开始">
      <bpmn:outgoing>Flow_1</bpmn:outgoing>
    </bpmn:startEvent>
    <bpmn:userTask id="Task_Apply" name="提交请假申请">
      <bpmn:incoming>Flow_1</bpmn:incoming>
      <bpmn:outgoing>Flow_2</bpmn:outgoing>
    </bpmn:userTask>
    <bpmn:userTask id="Task_Approve" name="主管审批">
      <bpmn:incoming>Flow_2</bpmn:incoming>
      <bpmn:outgoing>Flow_3</bpmn:outgoing>
    </bpmn:userTask>
    <bpmn:exclusiveGateway id="Gateway_1" name="审批结果">
      <bpmn:incoming>Flow_3</bpmn:incoming>
      <bpmn:outgoing>Flow_Approved</bpmn:outgoing>
      <bpmn:outgoing>Flow_Rejected</bpmn:outgoing>
    </bpmn:exclusiveGateway>
    <bpmn:endEvent id="EndEvent_Approved" name="审批通过">
      <bpmn:incoming>Flow_Approved</bpmn:incoming>
    </bpmn:endEvent>
    <bpmn:endEvent id="EndEvent_Rejected" name="审批拒绝">
      <bpmn:incoming>Flow_Rejected</bpmn:incoming>
    </bpmn:endEvent>
    <bpmn:sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="Task_Apply" />
    <bpmn:sequenceFlow id="Flow_2" sourceRef="Task_Apply" targetRef="Task_Approve" />
    <bpmn:sequenceFlow id="Flow_3" sourceRef="Task_Approve" targetRef="Gateway_1" />
    <bpmn:sequenceFlow id="Flow_Approved" name="通过" sourceRef="Gateway_1" targetRef="EndEvent_Approved">
      <bpmn:conditionExpression xsi:type="bpmn:tFormalExpression">\${approved == true}</bpmn:conditionExpression>
    </bpmn:sequenceFlow>
    <bpmn:sequenceFlow id="Flow_Rejected" name="拒绝" sourceRef="Gateway_1" targetRef="EndEvent_Rejected">
      <bpmn:conditionExpression xsi:type="bpmn:tFormalExpression">\${approved == false}</bpmn:conditionExpression>
    </bpmn:sequenceFlow>
  </bpmn:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_LeaveRequest">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
        <dc:Bounds x="179" y="159" width="36" height="36" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="186" y="202" width="22" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Task_Apply_di" bpmnElement="Task_Apply">
        <dc:Bounds x="270" y="137" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Task_Approve_di" bpmnElement="Task_Approve">
        <dc:Bounds x="430" y="137" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Gateway_1_di" bpmnElement="Gateway_1" isMarkerVisible="true">
        <dc:Bounds x="595" y="152" width="50" height="50" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="595" y="122" width="50" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="EndEvent_Approved_di" bpmnElement="EndEvent_Approved">
        <dc:Bounds x="712" y="79" width="36" height="36" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="705" y="122" width="50" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="EndEvent_Rejected_di" bpmnElement="EndEvent_Rejected">
        <dc:Bounds x="712" y="239" width="36" height="36" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="705" y="282" width="50" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="Flow_1_di" bpmnElement="Flow_1">
        <di:waypoint x="215" y="177" />
        <di:waypoint x="270" y="177" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_2_di" bpmnElement="Flow_2">
        <di:waypoint x="370" y="177" />
        <di:waypoint x="430" y="177" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_3_di" bpmnElement="Flow_3">
        <di:waypoint x="530" y="177" />
        <di:waypoint x="595" y="177" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_Approved_di" bpmnElement="Flow_Approved">
        <di:waypoint x="620" y="152" />
        <di:waypoint x="620" y="97" />
        <di:waypoint x="712" y="97" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="626" y="122" width="22" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_Rejected_di" bpmnElement="Flow_Rejected">
        <di:waypoint x="620" y="202" />
        <di:waypoint x="620" y="257" />
        <di:waypoint x="712" y="257" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="626" y="227" width="22" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn:definitions>`;
  message.success('已加载示例流程（请假流程）');
}
</script>

<style scoped>
.test-designer-page {
  display: flex;
  height: calc(100vh - 120px);
  gap: 16px;
}

.designer-wrapper {
  flex: 1;
  min-width: 0;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
}

.xml-preview {
  width: 400px;
  display: flex;
  flex-direction: column;
}

.xml-actions {
  margin-bottom: 12px;
}

.xml-content {
  max-height: calc(100vh - 240px);
  overflow: auto;
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 12px;
}

.xml-content pre {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>

